<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>心情日历</title>
    <link rel="stylesheet" href="css/iconfont.css" />
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <div class="container">
      <h2>2020年心情日历</h2>
      <h4>~点击下方图标，记录你的每日心情~</h4>
      <p>选择心情图标：</p>
      <!-- 心情图标 -->
      <div class="moods_container">
        <button class="mood mood_1 selected" id="mood_1">
          <i class="iconfont icon-laugh"></i>
        </button>
        <button class="mood mood_2" id="mood_2">
          <i class="iconfont icon-smile"></i>
        </button>
        <button class="mood mood_3" id="mood_3">
          <i class="iconfont icon-meh"></i>
        </button>
        <button class="mood mood_4" id="mood_4">
          <i class="iconfont icon-frown"></i>
        </button>
        <button class="mood mood_5" id="mood_5">
          <i class="iconfont icon-sad-tear"></i>
        </button>
      </div>
      <p>然后点击下方日历</p>
      <!-- 随机和清除按钮 -->
      <button class="action_btn randomize" id="randomize">
        <i class="iconfont icon-random"></i>
      </button>
      <button class="action_btn clear" id="clear">
        <i class="iconfont icon-reset"></i>
      </button>
      <!-- 日历 -->
      <div class="calendar" id="calendar">
        <!-- 月份 -->
        <!-- <div class="months month_0">
          <h3>January</h3> -->
        <!-- 星期 -->
        <!-- <div class="week_days_container">
            <div class="week_days">Sun</div>
            <div class="week_days">Mon</div>
            <div class="week_days">Tue</div>
            <div class="week_days">Wed</div>
            <div class="week_days">Thu</div>
            <div class="week_days">Fri</div>
            <div class="week_days">Sat</div>
          </div> -->
        <!-- 日期 -->
        <!-- <div class="days_container">
            <div class="days"></div>
            <div class="days"></div>
            <div class="days"></div>
            <div class="days">
              <span class="circle">1</span>
            </div>
            <div class="days">
              <span class="circle">2</span>
            </div>
            <div class="days">
              <span class="circle">3</span>
            </div>
            <div class="days">
              <span class="circle">4</span>
            </div>
            <div class="days">
              <span class="circle">5</span>
            </div>
            <div class="days">
              <span class="circle">6</span>
            </div>
            <div class="days">
              <span class="circle">7</span>
            </div>
          </div> -->
        <!-- </div> -->
      </div>
    </div>
    <script src="js/main.js"></script>
  </body>
</html>
